<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云海书舟 Login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f5f6fa;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .container {
            flex: 1;
            display: flex;
            position: relative;
            overflow: hidden;
        }

        .wave-bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 55%;
            height: 100%;
            background-color: #363b64;
            overflow: hidden;
            clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
        }

        /* 季节动画容器 */
        .season-container {
            position: fixed;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 0;
        }

        /* 春天：樱花效果 */
        .spring .petal {
            position: absolute;
            background-color: rgba(255, 192, 203, 0.7);
            border-radius: 150% 0 150% 0;
            animation: falling 10s linear infinite;
            z-index: 0;
        }

        /* 夏天：雨滴效果 */
        .summer .raindrop {
            position: absolute;
            width: 2px;
            background: linear-gradient(transparent, rgba(255, 255, 255, 0.5));
            animation: rain 1s linear infinite;
            z-index: 0;
        }

        /* 秋天：落叶效果 */
        .autumn .leaf {
            position: absolute;
            width: 15px;
            height: 15px;
            background-color: rgba(255, 165, 0, 0.6);
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            animation: falling 8s linear infinite;
            z-index: 0;
        }

        /* 冬天：雪花效果 */
        .winter .snowflake {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            animation: snow 6s linear infinite;
            z-index: 0;
        }

        @keyframes falling {
            0% {
                transform: translate(0, -10%) rotate(0deg);
            }
            100% {
                transform: translate(100px, 1000%) rotate(360deg);
            }
        }

        @keyframes rain {
            0% {
                transform: translateY(-100%);
            }
            100% {
                transform: translateY(1000%);
            }
        }

        @keyframes snow {
            0% {
                transform: translate(0, -10%) rotate(0deg);
            }
            100% {
                transform: translate(50px, 1000%) rotate(360deg);
            }
        }

        /* 其他样式保持不变 */
        .login-container {
            position: absolute;
            right: 10%;
            top: 50%;
            transform: translateY(-50%);
            background: white;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            width: 400px;
            max-width: 90%;
            z-index: 1;
        }

        .logo {
            text-align: center;
            margin-bottom: 30px;
        }

        .logo img {
            height: 40px;
        }

        .login-type-switch {
            text-align: center;
            margin-bottom: 20px;
        }

        .switch-btn {
            background: none;
            border: none;
            color: #666;
            padding: 5px 15px;
            cursor: pointer;
            font-size: 14px;
            position: relative;
        }

        .switch-btn.active {
            color: #4c6ef5;
        }

        .switch-btn.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 15px;
            right: 15px;
            height: 2px;
            background-color: #4c6ef5;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
            font-size: 14px;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            border: none;
            border-bottom: 1px solid #eee;
            border-radius: 0;
            font-size: 14px;
            background: transparent;
            transition: all 0.3s ease;
            outline: none;
        }

        .form-group input:focus {
            border-bottom: 2px solid #4c6ef5;
        }

        .form-group input::placeholder {
            color: #999;
            font-size: 13px;
        }

        .verify-group {
            display: flex;
            gap: 10px;
        }

        .verify-group input {
            flex: 1;
        }

        .verify-btn {
            padding: 8px 15px;
            background-color: #4c6ef5;
            border: none;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            white-space: nowrap;
            transition: all 0.3s;
        }

        .verify-btn:hover:not(:disabled) {
            background-color: #4263eb;
        }

        .verify-btn:disabled {
            background-color: #94a3b8;
            color: white;
            cursor: not-allowed;
        }

        .login-btn {
            width: 100%;
            padding: 12px;
            background-color: #4c6ef5;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .login-btn:hover {
            background-color: #4263eb;
        }

        .footer {
            text-align: center;
            padding: 20px;
            color: #666;
            position: relative;
            z-index: 1;
        }

        .login-form {
            display: none;
        }

        .login-form.active {
            display: block;
        }

        @media (max-width: 768px) {
            .wave-bg {
                width: 100%;
                height: 40%;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
            }

            .login-container {
                right: 50%;
                transform: translate(50%, -50%);
                width: 90%;
                max-width: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wave-bg">
            <div class="season-container" id="seasonContainer"  >
                <img src="./_.._logo_font20241230_uugai.com-5629705-17355487299295.png" alt="">
            </div>
        </div>
        <div class="login-container">
            <div class="logo">
                <h2 style="font-size: 28px; font-weight: bold; color: #4c6ef5;">欢迎进入</h2>
                <!-- <img src="./logo.png" alt="云海书舟"> -->
            </div>
            <div class="login-type-switch">
                <button class="switch-btn active" onclick="switchLoginType('password')">密码登录</button>
                <button class="switch-btn" onclick="switchLoginType('email')">邮箱登录</button>
            </div>
            <form class="login-form active" id="password-login">
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" placeholder="请输入密码">
                </div>
                <button type="submit" class="login-btn">登录</button>
            </form>
            <form class="login-form" id="email-login">
                <div class="form-group">
                    <label>邮箱</label>
                    <input type="email" placeholder="请输入邮箱地址">
                </div>
                <div class="form-group">
                    <label>验证码</label>
                    <div class="verify-group">
                        <input type="text" placeholder="请输入验证码">
                        <button type="button" class="verify-btn" onclick="sendVerifyCode(this)">发送验证码</button>
                    </div>
                </div>
                <button type="submit" class="login-btn">登录</button>
            </form>
        </div>
    </div>
    <footer class="footer">
        <p>Copyright 2023 云海书舟</p>
    </footer>

    <script>
        // 切换登录方式
        function switchLoginType(type) {
            document.querySelectorAll('.switch-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');

            document.querySelectorAll('.login-form').forEach(form => {
                form.classList.remove('active');
            });
            document.getElementById(type + '-login').classList.add('active');
        }

        // 发送验证码
        function sendVerifyCode(btn) {
            let countdown = 60;
            btn.disabled = true;
            btn.innerText = `${countdown}秒后重试`;

            const timer = setInterval(() => {
                countdown--;
                if (countdown <= 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerText = '发送验证码';
                } else {
                    btn.innerText = `${countdown}秒后重试`;
                }
            }, 1000);
        }

        // 季节动画
        function initSeasonAnimation() {
            const container = document.getElementById('seasonContainer');
            const date = new Date();
            const month = date.getMonth() + 1;
            let season;

            // 判断季节
            if (month >= 3 && month <= 5) {
                season = 'spring';
                container.className = 'season-container spring';
                createSpringPetals();
            } else if (month >= 6 && month <= 8) {
                season = 'summer';
                container.className = 'season-container summer';
                createSummerRain();
            } else if (month >= 9 && month <= 11) {
                season = 'autumn';
                container.className = 'season-container autumn';
                createAutumnLeaves();
            } else {
                season = 'winter';
                container.className = 'season-container winter';
                createWinterSnow();
            }
        }

        // 创建春天樱花
        function createSpringPetals() {
            const container = document.getElementById('seasonContainer');
            for (let i = 0; i < 30; i++) {
                const petal = document.createElement('div');
                petal.className = 'petal';
                petal.style.left = Math.random() * 100 + '%';
                petal.style.animationDelay = Math.random() * 10 + 's';
                petal.style.width = Math.random() * 10 + 10 + 'px';
                petal.style.height = Math.random() * 10 + 10 + 'px';
                container.appendChild(petal);
            }
        }

        // 创建夏天雨滴
        function createSummerRain() {
            const container = document.getElementById('seasonContainer');
            for (let i = 0; i < 50; i++) {
                const raindrop = document.createElement('div');
                raindrop.className = 'raindrop';
                raindrop.style.left = Math.random() * 100 + '%';
                raindrop.style.animationDelay = Math.random() * 2 + 's';
                raindrop.style.height = Math.random() * 20 + 20 + 'px';
                container.appendChild(raindrop);
            }
        }

        // 创建秋天落叶
        function createAutumnLeaves() {
            const container = document.getElementById('seasonContainer');
            for (let i = 0; i < 20; i++) {
                const leaf = document.createElement('div');
                leaf.className = 'leaf';
                leaf.style.left = Math.random() * 100 + '%';
                leaf.style.animationDelay = Math.random() * 8 + 's';
                container.appendChild(leaf);
            }
        }

        // 创建冬天雪花
        function createWinterSnow() {
            const container = document.getElementById('seasonContainer');
            for (let i = 0; i < 50; i++) {
                const snowflake = document.createElement('div');
                snowflake.className = 'snowflake';
                snowflake.style.left = Math.random() * 100 + '%';
                snowflake.style.animationDelay = Math.random() * 6 + 's';
                snowflake.style.width = snowflake.style.height = Math.random() * 4 + 2 + 'px';
                container.appendChild(snowflake);
            }
        }

        // 页面加载时初始化季节动画
        window.addEventListener('load', initSeasonAnimation);
    </script>
</body>
</html>